CSS-ൽ പ്രാവീണ്യം നേടുക: @property ഉപയോഗിച്ച് കസ്റ്റം പ്രോപ്പർട്ടി രജിസ്ട്രേഷൻ

കസ്റ്റം പ്രോപ്പർട്ടികൾ (CSS വേരിയബിളുകൾ എന്നും അറിയപ്പെടുന്നു) CSS എഴുതുന്നതിലും പരിപാലിക്കുന്നതിലും വിപ്ലവം സൃഷ്ടിച്ചു. ഇത് ഉപയോഗിച്ച്, വീണ്ടും ഉപയോഗിക്കാവുന്ന വാല്യുകൾ നിർവചിക്കാൻ കഴിയും, ഇത് സ്റ്റൈൽഷീറ്റുകളെ കൂടുതൽ ഫ്ലെക്സിബിളും പരിപാലിക്കാൻ എളുപ്പവുമാക്കുന്നു. എന്നാൽ ഒരു വാല്യു നിർവചിക്കുന്നതിനപ്പുറം നിങ്ങൾക്ക് എന്തെങ്കിലും ചെയ്യാൻ കഴിഞ്ഞാലോ? ഒരു കസ്റ്റം പ്രോപ്പർട്ടിക്ക് ഒരു വാല്യുവിൻ്റെ തരം, അതിന്റെ ആദ്യത്തെ വാല്യു, ഇൻഹെറിറ്റൻസ് സ്വഭാവം എന്നിവ നിർവചിക്കാൻ കഴിഞ്ഞാലോ? അവിടെയാണ് @property വരുന്നത്.

എന്താണ് @property?

@property എന്നത് ബ്രൗസറിൽ ഒരു കസ്റ്റം പ്രോപ്പർട്ടി വ്യക്തമായി രജിസ്റ്റർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു CSS അറ്റ്-റൂൾ ആണ്. ഈ രജിസ്ട്രേഷൻ പ്രക്രിയ, പ്രോപ്പർട്ടിയുടെ തരം, അതിന്റെ ആദ്യത്തെ വാല്യു, അത് അതിന്റെ പേരന്റ് എലമെൻ്റിൽ നിന്ന് ഇൻഹെറിറ്റ് ചെയ്യണോ വേണ്ടയോ തുടങ്ങിയ വിവരങ്ങൾ ബ്രൗസർക്ക് നൽകുന്നു. ഇത് ഇനി പറയുന്ന നിരവധി കാര്യങ്ങൾ സാധ്യമാക്കുന്നു:

• ടൈപ്പ് ചെക്കിംഗ്: കസ്റ്റം പ്രോപ്പർട്ടിക്ക് ശരിയായ തരത്തിലുള്ള വാല്യു നൽകിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.
• ആനിമേഷൻ: സംഖ്യകൾ അല്ലെങ്കിൽ നിറങ്ങൾ പോലുള്ള പ്രത്യേക തരത്തിലുള്ള കസ്റ്റം പ്രോപ്പർട്ടികൾക്ക് സുഗമമായ ട്രാൻസിഷനുകളും ആനിമേഷനുകളും നൽകുന്നു.
• ഡിഫോൾട്ട് വാല്യുകൾ: കസ്റ്റം പ്രോപ്പർട്ടി വ്യക്തമായി നിർവചിച്ചിട്ടില്ലെങ്കിൽ ഒരു ഫോൾബാക്ക് വാല്യു നൽകുന്നു.
• ഇൻഹെറിറ്റൻസ് നിയന്ത്രണം: കസ്റ്റം പ്രോപ്പർട്ടി അതിന്റെ പേരന്റ് എലമെൻ്റിൽ നിന്ന് വാല്യു ഇൻഹെറിറ്റ് ചെയ്യണോ എന്ന് നിർണ്ണയിക്കുന്നു.

ഇതിനെ CSS വേരിയബിളുകളിലേക്ക് ടൈപ്പ് സുരക്ഷ ചേർക്കുന്നതായി കരുതുക. കൂടുതൽ കരുത്തുറ്റതും പ്രവചിക്കാവുന്നതുമായ സ്റ്റൈൽഷീറ്റുകൾ ഉണ്ടാക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു.

@propertyയുടെ സിന്റാക്സ്

@property റൂൾ ഈ അടിസ്ഥാന സിന്റാക്സ് പിന്തുടരുന്നു:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

ഓരോ ഭാഗവും നമുക്ക് വിശദമായി പരിശോധിക്കാം:

• --property-name: നിങ്ങൾ രജിസ്റ്റർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന കസ്റ്റം പ്രോപ്പർട്ടിയുടെ പേര്. ഇത് രണ്ട് ഹൈഫനുകളിൽ (--) ആരംഭിക്കണം.
• syntax: പ്രോപ്പർട്ടിയുടെ വാല്യുവിൻ്റെ തരം നിർവചിക്കുന്നു. ഇത് ടൈപ്പ് ചെക്കിംഗിനും ആനിമേഷനും നിർണായകമാണ്. ലഭ്യമായ സിന്റാക്സ് വാല്യുകൾ നമ്മുക്ക് താഴെ വിശദമായി പരിശോധിക്കാം.
• inherits: പ്രോപ്പർട്ടി അതിന്റെ പേരന്റ് എലമെൻ്റിൽ നിന്ന് ഇൻഹെറിറ്റ് ചെയ്യണോ എന്ന് സൂചിപ്പിക്കുന്ന ഒരു ബൂളിയൻ വാല്യു. ഇത് വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ false ആയിരിക്കും ഡിഫോൾട്ട് വാല്യു.
• initial-value: ഒരു എലമെൻ്റിൽ പ്രോപ്പർട്ടി വ്യക്തമായി സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ, അതിനായുള്ള ഡിഫോൾട്ട് വാല്യു. ഇത് എപ്പോഴും ഒരു ഫോൾബാക്ക് വാല്യു ലഭ്യമാണെന്ന് ഉറപ്പാക്കുന്നു.

syntax ഡിസ്ക്രിപ്റ്റർ മനസ്സിലാക്കുക

syntax ഡിസ്ക്രിപ്റ്റർ ആണ് @property റൂളിന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗം. കസ്റ്റം പ്രോപ്പർട്ടിക്ക് എന്ത് തരത്തിലുള്ള വാല്യുവാണ് പ്രതീക്ഷിക്കുന്നതെന്ന് ഇത് ബ്രൗസറിനോട് പറയുന്നു. ചില സാധാരണ സിന്റാക്സ് വാല്യുകൾ ഇതാ:

• *: ഏത് വാല്യുവും അനുവദിക്കുന്നു. ഇത് ഏറ്റവും കൂടുതൽ അനുവദനീയമായ സിന്റാക്സാണ്. രജിസ്ട്രേഷൻ ഇല്ലാത്ത ഒരു സാധാരണ CSS വേരിയബിളിന്റെ സ്വഭാവം ഇത് കാണിക്കുന്നു. ഇത് വളരെ കുറച്ച് മാത്രം ഉപയോഗിക്കുക.
• <length>: ഒരു ലെങ്ത് വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 10px, 2em, 50%). ഇത് വ്യത്യസ്ത ലെങ്ത് വാല്യുകൾക്കിടയിൽ സുഗമമായ ആനിമേഷനുകൾ നൽകുന്നു.
• <number>: ഒരു സംഖ്യാ വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 1, 3.14, -5). ഒപാസിറ്റി അല്ലെങ്കിൽ സ്കെയിൽ പോലുള്ള സംഖ്യാ പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യാൻ ഉപയോഗപ്രദമാണ്.
• <percentage>: ഒരു ശതമാനം വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 25%, 100%).
• <color>: ഒരു കളർ വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). ഇത് സുഗമമായ കളർ ട്രാൻസിഷനുകളും ആനിമേഷനുകളും നൽകുന്നു.
• <image>: ഒരു ഇമേജ് വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, url(image.jpg), linear-gradient(...)).
• <integer>: ഒരു ഇന്റിജർ വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 1, -10, 0).
• <angle>: ഒരു ആംഗിൾ വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 45deg, 0.5rad, 200grad). റൊട്ടേഷനുകൾ ആനിമേറ്റ് ചെയ്യാൻ ഉപയോഗപ്രദമാണ്.
• <time>: ഒരു ടൈം വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 1s, 500ms). കസ്റ്റം പ്രോപ്പർട്ടികൾ വഴി ആനിമേഷൻ ദൈർഘ്യം അല്ലെങ്കിൽ കാലതാമസം നിയന്ത്രിക്കാൻ ഉപയോഗപ്രദമാണ്.
• <resolution>: ഒരു റെസല്യൂഷൻ വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, 300dpi, 96dpi).
• <transform-list>: ട്രാൻസ്ഫോം ഫംഗ്‌ഷനുകളുടെ ഒരു ലിസ്റ്റ് പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, translateX(10px) rotate(45deg)). സങ്കീർണ്ണമായ ട്രാൻസ്ഫോർമേഷനുകൾ ആനിമേറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു.
• <custom-ident>: ഒരു കസ്റ്റം ഐഡൻ്റിഫയർ (ഒരു സ്ട്രിംഗ്) പ്രതീക്ഷിക്കുന്നു. ഒരു enum പോലെ.
• <string>: ഒരു സ്ട്രിംഗ് വാല്യു പ്രതീക്ഷിക്കുന്നു (ഉദാഹരണത്തിന്, "Hello World"). ഇതിൽ ശ്രദ്ധിക്കുക, കാരണം സ്ട്രിംഗുകൾ ആനിമേറ്റ് ചെയ്യുന്നത് പൊതുവെ പിന്തുണയ്ക്കുന്നില്ല.
• കസ്റ്റം സിന്റാക്സുകൾ: മുകളിൽ കൊടുത്തവയുടെ കോമ്പിനേഷനുകളും | (or), `[]` (ഗ്രൂപ്പിംഗ്), `+` (ഒന്ന് അല്ലെങ്കിൽ കൂടുതൽ), `*` (ഒന്നുമില്ലെങ്കിൽ കൂടുതൽ), കൂടാതെ `?` (ഒന്നുമില്ലെങ്കിൽ ഒന്ന്) ഓപ്പറേറ്ററുകളും ഉപയോഗിച്ച് നിങ്ങൾക്ക് കൂടുതൽ സങ്കീർണ്ണമായ സിന്റാക്സുകൾ നിർമ്മിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്: <length> | <percentage> ഒരു ലെങ്ത് അല്ലെങ്കിൽ ഒരു ശതമാനം വാല്യുവിനെ അനുവദിക്കുന്നു.

@propertyയുടെ പൂർണ്ണമായ ശേഷി ഉപയോഗിക്കുന്നതിന് ശരിയായ syntax തിരഞ്ഞെടുക്കേണ്ടത് അത്യാവശ്യമാണ്.

@propertyയുടെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

നിങ്ങളുടെ CSS-ൽ @property എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം.

ഉദാഹരണം 1: പശ്ചാത്തല നിറം ആനിമേറ്റ് ചെയ്യുക

ഒരു ബട്ടണിന്റെ പശ്ചാത്തല നിറം ആനിമേറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക. പശ്ചാത്തല വർണ്ണത്തിനായി ഒരു കസ്റ്റം പ്രോപ്പർട്ടി രജിസ്റ്റർ ചെയ്യാനും CSS ട്രാൻസിഷനുകൾ ഉപയോഗിച്ച് ആനിമേറ്റ് ചെയ്യാനും @property ഉപയോഗിക്കാം.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

ഈ ഉദാഹരണത്തിൽ, --bg-color എന്ന കസ്റ്റം പ്രോപ്പർട്ടി <color> സിന്റാക്സിൽ രജിസ്റ്റർ ചെയ്യുന്നു, അതായത് ഒരു കളർ വാല്യു ആണ് പ്രതീക്ഷിക്കുന്നത്. initial-value വൈറ്റ് (#fff) ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. ബട്ടൺ ഹോവർ ചെയ്യുമ്പോൾ, --bg-color ചുവപ്പ് (#f00) ആയി മാറുന്നു, കൂടാതെ ട്രാൻസിഷൻ പശ്ചാത്തല നിറം സുഗമമായി ആനിമേറ്റ് ചെയ്യുന്നു.

ഉദാഹരണം 2: ഒരു സംഖ്യ ഉപയോഗിച്ച് ബോർഡർ റേഡിയസ് നിയന്ത്രിക്കുക

ഒരു എലമെൻ്റിൻ്റെ ബോർഡർ റേഡിയസ് നിയന്ത്രിക്കാനും അത് ആനിമേറ്റ് ചെയ്യാനും @property ഉപയോഗിക്കാം.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

ഇവിടെ, --border-radius ഒരു <length> ആയി രജിസ്റ്റർ ചെയ്യുന്നു, ഇത് px, em, അല്ലെങ്കിൽ % പോലുള്ള ലെങ്ത് വാല്യുകൾ സ്വീകരിക്കുമെന്ന് ഉറപ്പാക്കുന്നു. ആദ്യത്തെ വാല്യു 0px ആണ്. .rounded-box-ൽ ഹോവർ ചെയ്യുമ്പോൾ, ബോർഡർ റേഡിയസ് 20px ആയി ആനിമേറ്റ് ചെയ്യുന്നു.

ഉദാഹരണം 3: ഒരു ഷാഡോ ഓഫ്‌സെറ്റ് ആനിമേറ്റ് ചെയ്യുക

ഒരു ബോക്സ് ഷാഡോയുടെ തിരശ്ചീന ഓഫ്‌സെറ്റ് ആനിമേറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് കരുതുക.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

ഈ സാഹചര്യത്തിൽ, --shadow-offset-x ഒരു <length> ആയി രജിസ്റ്റർ ചെയ്യുന്നു, കൂടാതെ അതിന്റെ ആദ്യത്തെ വാല്യു 0px ആണ്. box-shadow പ്രോപ്പർട്ടി അതിന്റെ തിരശ്ചീന ഓഫ്‌സെറ്റിനായി ഈ കസ്റ്റം പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. ഹോവർ ചെയ്യുമ്പോൾ, ഓഫ്‌സെറ്റ് 10px ആയി ആനിമേറ്റ് ചെയ്യുന്നു.

ഉദാഹരണം 4: തീമിംഗിനായി <custom-ident> ഉപയോഗിക്കുന്നു

<custom-ident> സിന്റാക്സ് ഉപയോഗിച്ച്, മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള സ്ട്രിംഗ് വാല്യുക്കളുടെ ഒരു കൂട്ടം നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് CSS വേരിയബിളുകൾക്കായി ഒരു enum ഉണ്ടാക്കുന്നു. തീമിംഗിനോ വ്യത്യസ്ത സ്റ്റേറ്റുകൾ നിയന്ത്രിക്കുന്നതിനോ ഇത് ഉപയോഗപ്രദമാണ്.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

ഇവിടെ, --theme എന്നതിനെ <custom-ident> സിന്റാക്സിൽ രജിസ്റ്റർ ചെയ്യുന്നു. @property റൂളിൽ അനുവദനീയമായ ഐഡൻ്റിഫയറുകൾ ഞങ്ങൾ വ്യക്തമായി ലിസ്റ്റ് ചെയ്യുന്നില്ലെങ്കിലും, കോഡ് `light`, `dark` ആണെന്ന് സൂചിപ്പിക്കുന്നു. തുടർന്ന് CSS, നിലവിലെ തീമിനെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത ശൈലികൾ പ്രയോഗിക്കാൻ കണ്ടീഷണൽ ലോജിക് (var(--theme) == light ? ... : ...) ഉപയോഗിക്കുന്നു. ഒരു എലമെൻ്റിലേക്ക് `dark-theme` ക്ലാസ് ചേർക്കുന്നത് തീമിനെ ഡാർക്ക് മോഡിലേക്ക് മാറ്റും. `var()` ഉപയോഗിക്കുന്ന കണ്ടീഷണൽ ലോജിക് ഒരു സാധാരണ CSS അല്ലെന്നും ഇതിന് പ്രീപ്രൊസസ്സറുകളോ ജാവാസ്ക്രിപ്റ്റോ ആവശ്യമാണെന്നും ഓർക്കുക. CSS ക്ലാസുകളും കാസ്കേഡിംഗും ഉപയോഗിക്കുന്ന ഒരു സാധാരണ രീതി ഇതായിരിക്കും:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

ഈ പരിഷ്കരിച്ച ഉദാഹരണത്തിൽ, തീം നിയന്ത്രിക്കുന്നതിന് body എലമെൻ്റിൽ ഒരു data-theme ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു. `light` , `dark` എന്നിവയ്ക്കിടയിൽ ആട്രിബ്യൂട്ട് ടോഗിൾ ചെയ്യാൻ JavaScript (കമൻ്റ് ചെയ്തത്) ഉപയോഗിക്കും. CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് തീമിംഗ് ചെയ്യുന്നതിനുള്ള കൂടുതൽ ശക്തവും സാധാരണവുമായ സമീപനമാണിത്.

@property ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനങ്ങൾ

@property ഉപയോഗിക്കുന്നതിലൂടെ നിരവധി ഗുണങ്ങളുണ്ട്:

• മെച്ചപ്പെട്ട കോഡ് റീഡബിലിറ്റിയും മെയിൻ്റനബിലിറ്റിയും: ഒരു കസ്റ്റം പ്രോപ്പർട്ടിക്കുള്ള വാല്യുവിൻ്റെ തരം വ്യക്തമായി നിർവചിക്കുന്നതിലൂടെ, നിങ്ങളുടെ കോഡ് കൂടുതൽ മനസ്സിലാക്കാവുന്നതും പിശകുകൾ കുറഞ്ഞതുമാക്കുന്നു.
• മെച്ചപ്പെടുത്തിയ ആനിമേഷൻ ശേഷികൾ: @property കസ്റ്റം പ്രോപ്പർട്ടികൾക്കായി സുഗമമായ ട്രാൻസിഷനുകളും ആനിമേഷനുകളും നൽകുന്നു, ഇത് ഡൈനാമിക്, ആകർഷകമായ യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള പുതിയ സാധ്യതകൾ തുറക്കുന്നു.
• മികച്ച പ്രകടനം: രജിസ്റ്റർ ചെയ്ത കസ്റ്റം പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് എലമെൻ്റുകളുടെ റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ ബ്രൗസറുകൾക്ക് കഴിയും, ഇത് മികച്ച പ്രകടനത്തിലേക്ക് നയിക്കുന്നു.
• ടൈപ്പ് സുരക്ഷ: നൽകിയിട്ടുള്ള വാല്യു പ്രഖ്യാപിത സിന്റാക്സുമായി പൊരുത്തപ്പെടുന്നുണ്ടോയെന്ന് ബ്രൗസർ പരിശോധിക്കുന്നു, ഇത് അപ്രതീക്ഷിതമായ പെരുമാറ്റം തടയുകയും ഡീബഗ്ഗിംഗ് എളുപ്പമാക്കുകയും ചെയ്യുന്നു. നിരവധി ഡെവലപ്പർമാർ കോഡ്ബേസിലേക്ക് സംഭാവന ചെയ്യുന്ന വലിയ പ്രോജക്റ്റുകളിൽ ഇത് വളരെ ഉപയോഗപ്രദമാണ്.
• ഡിഫോൾട്ട് വാല്യുകൾ: ഒരു കസ്റ്റം പ്രോപ്പർട്ടിക്ക് എപ്പോഴും സാധുവായ വാല്യു ഉണ്ടായിരിക്കണം, അത് വ്യക്തമായി സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ പോലും പിശകുകൾ തടയുകയും നിങ്ങളുടെ CSS-ൻ്റെ കരുത്ത് മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

ബ്രൗസർ അനുയോജ്യത

2023 അവസാനത്തോടെ, @propertyക്ക് നല്ല ബ്രൗസർ പിന്തുണയുണ്ട്, പക്ഷേ സാർവത്രികമല്ല. Chrome, Firefox, Safari, Edge ഉൾപ്പെടെയുള്ള മിക്ക ആധുനിക ബ്രൗസറുകളിലും ഇത് പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, പഴയ ബ്രൗസറുകൾ ഇതിനെ പിന്തുണച്ചേക്കില്ല. പ്രൊഡക്ഷനിൽ @property ഉപയോഗിക്കുന്നതിന് മുമ്പ് Can I use... പോലുള്ള വെബ്സൈറ്റുകളിൽ ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത വിവരങ്ങൾ എപ്പോഴും പരിശോധിക്കുക.

പഴയ ബ്രൗസറുകൾ കൈകാര്യം ചെയ്യാൻ, നിങ്ങൾക്ക് ഫീച്ചർ ചോദ്യങ്ങൾ (@supports) ഉപയോഗിച്ച് ഫോൾബാക്ക് ശൈലികൾ നൽകാം:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

--propertyയും valueയും ഒരു കസ്റ്റം പ്രോപ്പർട്ടി ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക.

@property എപ്പോൾ ഉപയോഗിക്കണം

ഇനി പറയുന്ന സാഹചര്യങ്ങളിൽ @property ഉപയോഗിക്കാൻ ശ്രമിക്കുക:

• നിങ്ങൾക്ക് കസ്റ്റം പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യണമെങ്കിൽ: @propertyയുടെ പ്രധാന ഉപയോഗം ഇതാണ്. ശരിയായ സിന്റാക്സ് ഉപയോഗിച്ച് പ്രോപ്പർട്ടി രജിസ്റ്റർ ചെയ്യുന്നത് സുഗമമായ ആനിമേഷനുകൾ നൽകുന്നു.
• കസ്റ്റം പ്രോപ്പർട്ടികൾക്ക് ടൈപ്പ് സുരക്ഷ ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ: ഒരു കസ്റ്റം പ്രോപ്പർട്ടിക്ക് ഒരു പ്രത്യേക തരത്തിലുള്ള വാല്യു ഉണ്ടായിരിക്കണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അത് രജിസ്റ്റർ ചെയ്യാൻ @property ഉപയോഗിക്കുക.
• ഒരു കസ്റ്റം പ്രോപ്പർട്ടിക്ക് ഡിഫോൾട്ട് വാല്യു നൽകാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ: initial-value ഡിസ്ക്രിപ്റ്റർ ഉപയോഗിച്ച് ഒരു ഫോൾബാക്ക് വാല്യു വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• വലിയ പ്രോജക്റ്റുകളിൽ: @property കോഡ് മെയിൻ്റനബിലിറ്റി വർദ്ധിപ്പിക്കുകയും പിശകുകൾ തടയുകയും ചെയ്യുന്നു, ഇത് നിരവധി ഡെവലപ്പർമാരുള്ള വലിയ പ്രോജക്റ്റുകൾക്ക് പ്രത്യേകിച്ചും ഗുണം ചെയ്യും.
• വീണ്ടും ഉപയോഗിക്കാവുന്ന കോമ്പോണൻ്റുകൾ അല്ലെങ്കിൽ ഡിസൈൻ സിസ്റ്റങ്ങൾ ഉണ്ടാക്കുമ്പോൾ: @property നിങ്ങളുടെ കോമ്പോണൻ്റുകളിൽ സ്ഥിരതയും പ്രവചനാതീതതയും ഉറപ്പാക്കാൻ സഹായിക്കും.

ഒഴിവാക്കേണ്ട പൊതുവായ തെറ്റുകൾ

• syntax ഡിസ്ക്രിപ്റ്റർ മറന്നുപോകുന്നത്: syntax ഡിസ്ക്രിപ്റ്റർ ഇല്ലാതെ, ബ്രൗസറിന് പ്രതീക്ഷിക്കുന്ന വാല്യുവിൻ്റെ തരം അറിയില്ല, കൂടാതെ ആനിമേഷനുകൾ ശരിയായി പ്രവർത്തിക്കില്ല.
• തെറ്റായ syntax വാല്യു ഉപയോഗിക്കുന്നത്: തെറ്റായ സിന്റാക്സ് തിരഞ്ഞെടുക്കുന്നത് അപ്രതീക്ഷിതമായ പെരുമാറ്റത്തിലേക്ക് നയിച്ചേക്കാം. പ്രതീക്ഷിക്കുന്ന വാല്യുവിൻ്റെ തരത്തെ കൃത്യമായി പ്രതിഫലിപ്പിക്കുന്ന സിന്റാക്സ് തിരഞ്ഞെടുക്കുന്നത് ഉറപ്പാക്കുക.
• initial-value നൽകാതിരിക്കുന്നത്: ഒരു ഇനിഷ്യൽ വാല്യു ഇല്ലാതെ, കസ്റ്റം പ്രോപ്പർട്ടി നിർവചിക്കപ്പെടാതെ വന്നേക്കാം, ഇത് പിശകുകളിലേക്ക് നയിക്കുന്നു. എപ്പോഴും ഒരു നല്ല ഡിഫോൾട്ട് വാല്യു നൽകുക.
• സിന്റാക്സായി * അമിതമായി ഉപയോഗിക്കുന്നത്: സൗകര്യപ്രദമാണെങ്കിലും, * ഉപയോഗിക്കുന്നത് ടൈപ്പ് ചെക്കിംഗിന്റെയും ആനിമേഷന്റെയും ഗുണങ്ങളെ ഇല്ലാതാക്കുന്നു. ഏതെങ്കിലും തരത്തിലുള്ള വാല്യു അനുവദിക്കേണ്ടി വരുമ്പോൾ മാത്രം ഇത് ഉപയോഗിക്കുക.
• ബ്രൗസർ അനുയോജ്യത അവഗണിക്കുന്നത്: ബ്രൗസർ അനുയോജ്യത എപ്പോഴും പരിശോധിക്കുകയും പഴയ ബ്രൗസറുകൾക്കായി ഫോൾബാക്ക് ശൈലികൾ നൽകുകയും ചെയ്യുക.

@propertyയും CSS Houdiniയും

@property എന്നത് CSS Houdini എന്ന് വിളിക്കുന്ന API-കളുടെ ഒരു വലിയ കൂട്ടത്തിൻ്റെ ഭാഗമാണ്. Houdini ഡെവലപ്പർമാരെ ബ്രൗസറിൻ്റെ റെൻഡറിംഗ് എഞ്ചിനിലേക്ക് ടാപ്പ് ചെയ്യാൻ അനുവദിക്കുന്നു, ഇത് സ്റ്റൈലിംഗും ലേഔട്ട് പ്രക്രിയയും നിയന്ത്രിക്കാൻ സഹായിക്കുന്നു. മറ്റ് Houdini API-കളിൽ ഇവ ഉൾപ്പെടുന്നു:

• Paint API: കസ്റ്റം പശ്ചാത്തല ചിത്രങ്ങളും ബോർഡറുകളും നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• Animation Worklet API: ബ്രൗസറിൻ്റെ കോമ്പോസിറ്റർ ത്രെഡിൽ നേരിട്ട് പ്രവർത്തിക്കുന്ന ഉയർന്ന പ്രകടനമുള്ള ആനിമേഷനുകൾ ഉണ്ടാക്കാൻ ഇത് സഹായിക്കുന്നു.
• Layout API: കസ്റ്റം ലേഔട്ട് അൽഗോരിതങ്ങൾ നിർവചിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.
• Parser API: ബ്രൗസറിൻ്റെ CSS പാർസറിലേക്ക് ആക്സസ് നൽകുന്നു.

@property പഠിക്കാൻ താരതമ്യേന ലളിതമായ ഒരു Houdini API ആണ്, പക്ഷേ ഇത് കൂടുതൽ വിപുലമായ Houdini ഫീച്ചറുകൾ പര്യവേക്ഷണം ചെയ്യുന്നതിനുള്ള വാതിൽ തുറക്കുന്നു.

ഉപസംഹാരം

കസ്റ്റം പ്രോപ്പർട്ടികൾക്കായി വിപുലമായ ശേഷികൾ നൽകുന്ന ശക്തമായ CSS അറ്റ്-റൂൾ ആണ് @property. ബ്രൗസറിൽ കസ്റ്റം പ്രോപ്പർട്ടികൾ രജിസ്റ്റർ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ടൈപ്പ് സുരക്ഷ ഉറപ്പാക്കാനും സുഗമമായ ആനിമേഷനുകൾ നൽകാനും നിങ്ങളുടെ CSS കോഡിന്റെ മൊത്തത്തിലുള്ള കരുത്ത് മെച്ചപ്പെടുത്താനും കഴിയും. ബ്രൗസർ പിന്തുണ സാർവത്രികമല്ലെങ്കിലും, @property ഉപയോഗിക്കുന്നതിലൂടെയുള്ള ഗുണങ്ങൾ, പ്രത്യേകിച്ചും വലിയ പ്രോജക്റ്റുകളിലും ഡിസൈൻ സിസ്റ്റങ്ങളിലും, ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിനുള്ള ഒരു വിലപ്പെട്ട ഉപകരണമാക്കി മാറ്റുന്നു. @property സ്വീകരിക്കുക, നിങ്ങളുടെ CSS കഴിവുകൾ അടുത്ത ഘട്ടത്തിലേക്ക് കൊണ്ടുപോകുക!